/* eslint react/jsx-key: 0 */

import React from 'react'
import Highlight, { defaultProps } from 'prism-react-renderer'
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
import { mdx } from '@mdx-js/react'

export default ({ children, className, live, render, show }) => {
    const language = className.replace(/language-/, '')

    console.log(show, "======show======");

    if (live) {
        return (
            <div className="LiveProvider" style={{ marginTop: '10px' }}>
                <LiveProvider
                    code={children.trim()}
                    transformCode={code => '/** @jsx mdx */' + code}
                    scope={{ mdx }}
                >
                    <div >
                        <LivePreview style={{ color: 'white' }} />
                        <LiveEditor style={{ backgroundColor: 'black' }} />
                    </div>
                    <LiveError style={{ color: '#999' }} />
                </LiveProvider>
            </div>
        )
    }

    if (render) {
        return (
            <LiveProvider code={children}>
                <LivePreview />
            </LiveProvider>
        )
    }

    return (
        <Highlight style={{ marginTop: '10px' }} {...defaultProps} code={children.trim()} language={language}>
            {({ className, style, tokens, getLineProps, getTokenProps }) => (
                <pre className={className} style={{ ...style, padding: '10px' }}>
                    {tokens.map((line, i) => (
                        <div key={i} {...getLineProps({ line, key: i })}>
                            {line.map((token, key) => (
                                <span key={key} {...getTokenProps({ token, key })} />
                            ))}
                        </div>
                    ))}
                </pre>
            )}
        </Highlight>
    )
}
